import React from 'react';
import { Row, Col, message, Tooltip, Button } from 'antd';
import services from '../../../../services/api/index';
import CommonListsIndex from '../../../../components/CommonLists/index';
import FilterTool from '../../../../components/FilterTool';
import UserList from './list';

class ProduceVersionIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.detailComponent = `/produce/produce/${props.match.params.id}/version/id/detail`;
    this.listsComponent = UserList;
    this.model_width = 500;
    this.initQueryParams = {
      event_id: props.match.params.id
    };
    this.queryParams = {
      ...this.initQueryParams
    };
    this.queryPanigation = {
      current_page: 1,
      page_size: 10
    };
  }
  componentDidMount() {}

  queryList(params) {
    services.produce.versions(params).then(res => {
      if (res.code === 0) {
        const { list, totalCount } = res.data
        const currentPage = params.current_page
        const page = Math.ceil(totalCount / this.queryPanigation.page_size)
        if (list && totalCount && list.length === 0 && currentPage > page) {
          this.onChangePagination(page, 'current_page')
        } else {
          this.setState({
            ...res.data,
          });
        }
        // this.setState({
        //   ...res.data
        // });
      } else {
        message.error(res.msg);
      }
    });
  }

  freshQueryList = () => {
    this.queryList({ ...this.queryPanigation, ...this.queryParams });
  };

  refreshPanagaition = params => {
    this.queryPanigation = {
      ...this.queryPanigation,
      ...params
    };
  };
  refreshFilter = (params, type) => {
    this.queryParams = { ...this.initQueryParams, ...params };
    if (type === false) return
    this.freshQueryList();
  };

  // 详情
  showDetail = (record) => {
    this.props.history.push(this.replaceUrlForId(this.detailComponent, this.getOpenParam(record)));
  };

  // 打开新窗口、页面的id
  getOpenParam = (record) => {
    return record.strategy_id;
  };

  // 表列定义
  getColumns = () => {
    return [
      {
        title: '策略名称',
        dataIndex: 'name',
        key: 'name',
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className="overflowtext">
                <Button type='link' onClick={this.showDetail.bind(this, record)}>{text}</Button>
              </div>
            </Tooltip>
          )
        }
      },
      {
        title: '版本号',
        dataIndex: 'version',
        key: 'version'
      },
      {
        title: '流量分配',
        key: 'sample_rate',
        dataIndex: 'sample_rate',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text > 0 && text + '%'} placement='topLeft'>
              {text > 0 && text + '%'}
            </Tooltip>
          );
        },
      },
      {
        title: '操作人',
        key: 'update_user_name',
        dataIndex: 'update_user_name',
        ellipsis: true,
        render: text => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {text}
              </div>
            </Tooltip>
          );
        }
      },
      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        width: 150,
        render: (text, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        }
      }
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;

    const data = [
      {
        type: 'rangepicker',
        key: 'start',
        name: ['start', 'end'],
        placeholder: ['开始时间', '结束时间'],
      },
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入版本号进行搜索',
      }
    ];
    return (
      <div>
        <Row type='flex' align='middle'>
          <Col span={24}>
            <FilterTool
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            edit={this.edit}
            queryList={this.freshQueryList}
            onChangePagination={this.onChangePagination}
            columns={this.getColumns()}
            rowKey='strategy_id'
          />
        </div>
      </div>
    );
  }
}

export default ProduceVersionIndex;
